import { Col, Row, Table, Tabs } from 'antd';
import React from 'react';
import CodeEditor from '@/components/CodeEditor';
import { columns, createHeadersDataSource } from './HttpCallTaskContent';
import { DataSourceType } from '../settings';

const { TabPane } = Tabs;

function EndNodeContent({ dataSourceType, content }) {
  const { headers, body, bodyFormat, status } = content;

  return (
    <Row gutter={16}>
      <Col span={12}>
        <Tabs defaultActiveKey="body">
          <TabPane tab="Body" key="body">
            <CodeEditor readOnly mode={bodyFormat} data={body} height={550} />
          </TabPane>
          {dataSourceType === DataSourceType.HTTP && (
            <TabPane tab="Header" key="header">
              <Table
                columns={columns}
                dataSource={createHeadersDataSource(headers)}
                pagination={false}
                bordered
              />
            </TabPane>
          )}
          {dataSourceType === DataSourceType.HTTP && (
            <TabPane tab="Status" key="status">
              <span style={{ color: '#037f31' }} className="margin-left">
                {status}
              </span>
            </TabPane>
          )}
        </Tabs>
      </Col>
    </Row>
  );
}

export default EndNodeContent;
